<template>
  <div class="message">
    <el-row type="flex" style="padding: 10px">
      <el-col style="float: left" :span="2">
        <el-avatar :src="messagaInfo.imgUrl"></el-avatar>
      </el-col>
      <el-col style="text-align: center">
        <p style="font-size: 20px">{{ messagaInfo.username }}</p>
        <p>{{ messagaInfo.message }}</p>
      </el-col>
      <el-col>
        <p style="text-align: right">{{messagaInfo.date}}</p>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "messageItem",
  props:{
    messagaInfo:{
      type:Object
    }
  }
}
</script>

<style scoped>
p {
  margin: 0;
  text-align: left;
}
.message{
  background-color: rgba(255,255,255,0.6);
}
</style>